<template>
  <div class="app-container">
    <div id="divSearch" ref="divSearch">
      <el-form :inline="true" :model="Search" class="demo-form-inline">
        <el-form-item label="工号" prop="Search">
          <el-input v-model.trim="Search.UserCode" placeholder="工号" />
        </el-form-item>
        <el-form-item label="姓名" prop="Search">
          <el-input v-model.trim="Search.UserName" placeholder="姓名" />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="getDataList"
            >查询</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-circle-plus"
            size="small"
            @click="handeAdd"
            >新增</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-check"
            size="small"
            @click="confirmData"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="Datelist"
      style="width: 100%; margin-top: 0px"
      border
      :height="tableHeight"
      @row-click="editRow"
    >
    <el-table-column align="center" label="序号" width="60">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="ID" width="110" v-if="false">
        <template slot-scope="scope">
          {{ scope.row.ID }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="工号" width="110">
        <template slot-scope="scope">
          <span v-if="!scope.row.edit">{{ scope.row.UserCode }}</span>
          <el-input
            v-model="scope.row.UserCode"
            aria-placeholder="请输入"
            v-if="scope.row.edit"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名" width="110">
        <template slot-scope="scope">
          {{ scope.row.UserName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="角色编码" width="110" >
        <template slot-scope="scope">
          {{ scope.row.RoleCode }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="角色名" width="110">
        <template slot-scope="scope">
          {{ scope.row.RoleName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="部门">
        <template slot-scope="scope">
          {{ scope.row.DepartmentName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="110">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="handleDelete(scope)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import path from "path";
import { deepClone } from "@/utils";
import { getDataList,updateUserRoleMapData,deleteUserRoleMapData } from "@/api/System";

export default {
  props: {
    inputName: String,
    required: true,
  },

  data() {
    return {
      tableHeight: null,
      ProjectForm: "",
      routes: [],
      Datelist: [],
      Search: {
        // 查询条件
        total: 0, // 总记录数
        pageSize: 0, // 一页显示的记录数
        page: 1, // /当前页码
        RNO: "008", // 表编号
        jsWhere: "", // 自定义条件
      },

      screenWidth: document.body.clientWidth,
    };
  },
  computed: {
    routesData() {
      return this.routes;
    },
  },
  created() {
    this.getDataList();
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 340 + "px";
    });
  },

  methods: {
    editRow(row, column, event) {
      this.$set(row, "edit", true);
    },
    pageChange(page) {
      // 翻页
      this.Search.page = page;

      this.getDataList();
    },
    async getDataList() {
      // 获取列表数据，通用
      this.Search.RoleCode=this.inputName
      const res = await getDataList({ data: JSON.stringify(this.Search) });

      this.Datelist = res.data.Table;
      this.Search.total = res.data.Table1[0].RecordCount;
    },
    sortChange: function (column) {
      this.Search.sort = column.prop + " " + column.order;
      this.getDataList();
    },

    async handeAdd() {
      let list = { RoleCode: this.inputName,ID:'' };
      this.Datelist.unshift(list);
    },
    async confirmData() {
      // 提交数据，需要修改
      const result = await updateUserRoleMapData({
        UserList: JSON.stringify(this.Datelist),
        RoleCode:this.inputName,
        IsPostBack: true,
      });

      if (result.code === 20000) {
        this.$notify({
          title: "Success",
          dangerouslyUseHTMLString: true,
          message: result.msg,
          type: "success",
        });
        this.getDataList();
      } else {
        this.$notify({
          title: "error",
          dangerouslyUseHTMLString: true,
          message: result.msg,
          type: "error",
        });
      }
    },
    async handleDelete({ $index, row }) {
      this.$confirm("确定删除该记录吗?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const result = await deleteUserRoleMapData({
          billID: JSON.stringify(row.ID),
        });
        if (result.code === 20000) {
          this.Datelist.splice($index, 1);
          this.$notify({
            title: "Success",
            dangerouslyUseHTMLString: true,
            message: result.msg,
            type: "success",
          });
          this.getDataList();
        } else {
          this.$notify({
            title: "error",
            dangerouslyUseHTMLString: true,
            message: result.msg,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .EditObjs-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 5px;
  }
}
</style>
